<template>
  <vxe-modal v-model="dialogVisible" append-to-body title="工时登记" width="60%" :before-hide-method="clear">
    <p class="common-title"><span class="titleName">基本信息</span></p>
    <Form v-model="form" :formOptions="contractFormOptions" />
    <p class="common-title"><span class="titleName">工时信息</span></p>
    <div class="anthorContent-item">
      <div class="title-operation">
        <el-button type="primary" size="small" @click="insertEvent(-1)">新增</el-button>
      </div>
      <Table ref="table" isEdit :columns="tableColumn" :tableData="tableData" />
    </div>

    <div slots="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </vxe-modal>
</template>
<script>
import VXETable from 'vxe-table';
import Form from '/@/components/PartForDialog/form.vue';
import Table from '/@/components/PartForDialog/table.vue';
export default {
  components: { Form, Table },
  data() {
    return {
      dialogVisible: false,
      form: {
        projectName: '',
        reportNumber: '',
        itemName: '',
        totalWorkingHours: '',
      },
      contractFormOptions: {
        column: 3,
        items: [
          {
            title: '工程名称',
            field: 'projectName',
            type: 'input',
            disabled: true,
          },
          {
            title: '报告编号',
            field: 'reportNumber',
            type: 'input',
            disabled: true,
          },
          {
            title: '检测项目',
            field: 'itemName',
            type: 'input',
            disabled: true,
          },
          {
            title: '总工时',
            field: 'totalWorkingHours',
            type: 'input',
            disabled: true,
          },
        ],
      },
      tableColumn: [
        {
          type: 'seq',
          width: 60,
          title: '序号',
        },
        {
          field: 'detectionUserName',
          title: '检测人员',
          editRender: { name: '$input', options: [], props: { placeholder: '请输入名称' } },
        },
        {
          field: 'workHours',
          title: '工时',
          type: 'number',
          editRender: { name: '$input', options: [], props: { placeholder: '请输入工时' } },
        },
        {
          field: 'remarks',
          title: '备注',
          editRender: { name: '$input', options: [], props: { placeholder: '请输入备注' } },
        },
        {
          field: '',
          title: '操作',
          width: 100,
          slots: {
            default: ({ row }) => {
              return [
                <vxe-button
                  type="text"
                  status="danger"
                  onClick={() => {
                    this.removeEvent(row);
                  }}
                >
                  删除
                </vxe-button>,
              ];
            },
          },
        },
      ],
      tableData: [],
      records: [],
    };
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    search() {
      this.form.page = 1;
      this.$emit('search', this.form);
    },
    reset() {
      this.resetPage();
      this.$emit('search', this.form);
    },
    clear() {
      this.dialogVisible = false;
      const $table = this.$refs.table.$refs.table;
      $table.remove();
    },
    async insertEvent(row) {
      const $table = this.$refs.table.$refs.table;
      const record = {
        parentTag: null,
        tag: Date.now() + '',
        sampleId: this.form.sampleId,
        detectionUserName: '',
        workHours: null,
        remarks: '',
      };
      const { row: newRow } = await $table.insertAt(record, row);
      await $table.setActiveCell(newRow);
    },
    async removeEvent(row) {
      const type = await VXETable.modal.confirm('您确定要删除该数据?');
      const $table = this.$refs.table.$refs.table;
      if (type === 'confirm') {
        $table.remove(row);
      }
    },
    save() {
      const $table = this.$refs.table.$refs.table;
      const { afterTreeFullData } = $table.$refs.xTable;
      this.$api.saveTimesheet({ timesheetCmdList: afterTreeFullData }).then((res) => {
        VXETable.modal.message({
          content: '工时登记成功',
          status: 'success',
        });
        this.dialogVisible = false;
      });
    },
    change({ type, currentPage, pageSize }) {
      this.form.page = currentPage;
      this.form.size = pageSize;
      this.$emit('pager', this.form);
      console.log(type, currentPage, pageSize);
    },
    // 重置参数
    resetPage() {
      this.form = {
        employeeName: '',
        idCard: '',
        page: 1,
        size: 10,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .table-normal .vxe-body--row .vxe-body--column {
    height: 40px !important;
  }
  .vxe-modal--box {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}
</style>
